<template>
	<view class="user-distribution-income" style="padding-top: 1rpx;" :style="{background:pageColor}">
		<view class="flex-center flex-column mt-md ml-md mr-md bg-info radius-32 rel">
			<view class="bg abs"></view>
			<view class="title c-black text-bold">升级{{$t('action.resellerName')}}</view>
			<image class="fx-pay-order mt-md" :src="`https://api.huixuananmm.com/admin/anmo/mine/fx-pay-order.png`">
			</image>
			<view class="flex-between f-mini-title mt-lg pt-sm" style="width:560rpx">
				<view class="flex-y-center">
					<view class="dot"></view>需支付{{options.price}}元升级到一级{{$t('action.resellerName')}}哟~
				</view>
				<view></view>
			</view>
			<view class="flex-y-center f-mini-title" style="width:560rpx;margin-top:15rpx">
				<view class="dot"></view>升级之后可享受更多权益，快去升级吧~
			</view>
		</view>
		<view class="pd-lg mt-md ml-md mr-md fill-base radius-32">
			<view class="f-mini-title c-title text-bold">支付方式</view>
			<view @tap.stop="toChangeItem('payInd',index)" class="flex-between mt-lg" v-for="(item,index) in payList"
				:key="index">
				<view class="pay-item flex-y-center">
					<view class="item-icon flex-center mr-md" :class="[{'wechat':item.id==1},{'alipay':item.id==3}]">
						<i class="iconfont icon-font-color" :class="[item.icon]"></i>
					</view>
					<view class="flex-y-baseline item-title">{{item.title}}
					</view>
				</view>
				<i class="pay-icon iconfont c-caption"
					:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':payInd == index}]"
					:style="{color:payInd==index?primaryColor:'#BEC3CE'}"></i>
			</view>
		</view>

		<view class="space-max-footer"></view>
		<fix-bottom-button @confirm="toConfirm" :text="[{text:'去支付升级',type:'confirm'}]" bgColor="#fff">
		</fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				payList: [],
				payInd: 0,
				detail: {},
				lockTap: false
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			this.options = options
			uni.setNavigationBarTitle({
				title: `升级${this.$t('action.resellerName')}`
			})
			this.initIndex()
		},
		onShow() {
			// #ifdef APP-PLUS
			var args = plus.runtime.arguments
			if (args == 'wechat-adapay-suc') {
				this.$util.back()
				this.getMineInfo()
				this.$util.goUrl({
					url: '/user/pages/distribution/pay-suc',
					openType: `redirectTo`
				})
			}
			plus.runtime.arguments = null
			plus.runtime.arguments = ""
			// #endif
		},
		// #ifdef H5
		destroyed() {
			// #endif
			// #ifndef H5
			onUnload() {
					// #endif
					this.$util.back()
				},
				onPullDownRefresh() {
					// #ifndef APP-PLUS
					uni.showNavigationBarLoading()
					// #endif
					this.initRefresh()
					uni.stopPullDownRefresh()
				},
				methods: {
					...mapActions(['getConfigInfo', 'getMineInfo']),
					...mapMutations(['updateOrderItem']),
					async initIndex(refresh = false) {
						this.$util.showLoading()
						if (!this.configInfo.id || refresh) {
							await this.getConfigInfo()
						}
						let {
							alipay_status = 0,
								app_wechat_pay = 0
						} = this.configInfo
						let weixinInd = this.payList.findIndex(item => {
							return item.id == 1
						})
						if (app_wechat_pay && weixinInd == -1) {
							this.payList.push({
								id: 1,
								icon: 'icon-weixin',
								title: '微信支付'
							})
						}
						let alipayInd = this.payList.findIndex(item => {
							return item.id == 3
						})
						if (alipay_status && alipayInd == -1) {
							// #ifndef MP-WEIXIN
							this.payList.push({
								id: 3,
								icon: 'icon-alipay-fill',
								title: '支付宝支付'
							})
							// #endif
						}
						this.$util.setNavigationBarColor({
							bg: this.primaryColor
						})
						this.detail = await this.$api.mine.partnerIndex()
						this.$util.setNavigationBarColor({
							bg: this.primaryColor
						})
						this.isLoad = true
						this.$util.hideAll()
						// #ifdef H5
						if (!refresh) {
							this.$jweixin.hideOptionMenu()
						}
						// #endif
					},
					initRefresh() {
						this.initIndex(true)
					},
					toChangeItem(key, val) {
						this[key] = val
						this.lockTap = false
					},
					async toConfirm() {
						let pay_model = this.payList[this.payInd].id
						if (this.lockTap) return
						this.lockTap = true
						this.$util.showLoading()
						try {
							let {
								pay_list,
								order_id,
								order_code
							} = await this.$api.mine.resellerLevelUp({
								pay_model
							})
							this.$util.hideAll()
							if (pay_list) {
								if (pay_model == 3) {
									pay_list = {
										orderInfo: pay_list,
										provider: 'alipay'
									}
								}

								// #ifdef H5
								if (pay_model == 3) {
									let {
										autograph
									} = this
									let alipay_params = `?autograph=${autograph}&id=${order_id}&aliptype=3`
									pay_list = Object.assign({}, pay_list, {
										order_id,
										page_url: `/user/pages/distribution/income?paysuc=1`,
										alipay_params
									})
									this.updateOrderItem({
										key: 'alipayOrderParams',
										val: pay_list
									})
									this.$util.goUrl({
										url: `/user/pages/alipay-result${alipay_params}`,
										openType: `redirectTo`
									})
									return
								}
								// #endif


								// #ifdef APP-PLUS
								if (pay_model === 1 && pay_list.adapay) {
									pay_list = Object.assign(pay_list, {
										type: 3,
										order_code
									})
								}
								// #endif

								try {
									let payResType = await this.$util.pay(pay_list)
									if (payResType === 'adapay_app_wechat') {
										this.lockTap = false
										return
									}
									if (payResType != 'adapay_app_alipay') {
										this.$util.showToast({
											title: `支付成功`
										})
									}
									setTimeout(() => {
										this.$util.back()
										this.getMineInfo()
										this.lockTap = false
										this.$util.goUrl({
											url: 1,
											openType: `navigateBack`
										})
									}, 1000)
								} catch (e) {
									this.$util.showToast({
										title: `支付失败`
									})
									this.lockTap = false
									return
								}
								return
							}
							// 余额支付/零元支付
							this.$util.showToast({
								title: `支付成功`
							})
							setTimeout(() => {
								this.$util.back()
								this.getMineInfo()
								this.lockTap = false
								this.$util.goUrl({
									url: '/user/pages/distribution/pay-suc',
									openType: `redirectTo`
								})
							}, 1000)
						} catch (e) {
							setTimeout(() => {
								this.lockTap = false
								this.$util.hideAll()
							}, 1000)
						}
					}
				}
		}
</script>


<style lang="scss">
	.user-distribution-income {

		.bg-info {
			width: 710rpx;
			height: 666rpx;
			background: #FEFFFE;
			overflow: hidden;

			.bg {
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 364rpx;
				background: linear-gradient(180deg, #F24E29 0%, rgba(250, 202, 169, 0) 100%);
				opacity: 0.2;
			}

			.title {
				font-size: 50rpx;
			}

			.fx-pay-order {
				width: 249rpx;
				height: 312rpx
			}

			.dot {
				width: 15rpx;
				height: 15rpx;
				background: #F14E29;
				border-radius: 15rpx;
				margin-right: 14rpx
			}
		}

		.pay-item {
			.item-icon {

				width: 70rpx;
				height: 70rpx;
				border-radius: 35rpx;

				.iconfont {
					font-size: 44rpx;
				}
			}

			.item-icon.wechat {
				background: #E7F9EE;

				.iconfont {
					background-image: linear-gradient(180deg, #90EE90 0%, #32CD32 100%, #19c865 100%);
				}
			}

			.item-icon.alipay {
				background: #E9F5FE;

				.iconfont {
					background-image: linear-gradient(180deg, #46BCFF 0%, #2587FF 100%, #1976FF 100%);
				}
			}

			.item-title {
				color: #2E3541;
			}

		}
	}
</style>